<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>试题详情</title>
    <link rel="stylesheet" href="/static/resources/bootstrap/css/bootstrap.css"/>
    <link href="/static/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/resources/css/style.css" rel="stylesheet">
    <!-- Javascript files -->
    <!-- jQuery -->
    <script type="text/javascript" src="/static/resources/js/jquery/jquery-3.1.1.min.js"></script>
    <!--VUE-->
    <script type="text/javascript" src="/static/resources/vue/vue.js"></script>
    <script type="text/javascript" src="/static/resources/vue/date.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="/static/resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/resources/layui/layui.all.js"></script>

</head>
<body>
<div style="margin-right: 100px" id="app">

    <form role="form" id="detailForm" class="form-horizontal">
        <div style="margin-left: 50px;">
            <input type="hidden" id="questionId" value="${question.id}">
            <button type="button" class="btn btn-info" onclick="modifyQuestion()" aria-label="Left Align" style="margin: 20px">
                <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> 提交
            </button>
            <a href="/questionDetail?id=${question.id}">
                <button type="button" class="btn btn-info" aria-label="Left Align" style="margin: 20px">
                    <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> 取消修改
                </button>
            </a>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">题目</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" value="${question.name}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="questionType">题目类型</label>
            <div class="col-sm-10">
                <select class="form-control" id="questionType">
                    <option value="1">选择题</option>
                    <option value="3">判断题</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="field">题库</label>
            <div class="col-sm-10" id="fieldDiv">
                <select class="form-control" id="field">
                </select>
            </div>
        </div>
        <div class="form-group" >
            <h5><label class="col-sm-2 control-label">可选知识点</label>
                <div class="col-sm-10" id="disSelect">

                </div>
            </h5>
        </div>
        <div class="form-group">
            <h5><label class="col-sm-2 control-label">已选知识点</label>
                <div class="col-sm-10" id="onSelect">
                    <#list question.pointList as point>
                        <span class="label label-info" style="margin: 10px">
                            <input type="hidden" class="pointId" value="${point.pointId}">
                            ${point.pointName}
                        </span>
                    </#list>
                </div>
            </h5>
        </div>
        <div id="questionBody">

        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="answer">答案</label>
            <div class="col-sm-10">
                <select class="form-control" id="answer">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="analysis">试题解析</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="analysis" rows="3">${question.analysis}</textarea>
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script>
    var fieldId='${question.field.fieldId}';
    var pointList=new Array();
    <#list question.pointList as point>
            pointList.push(${point.pointId});
    </#list>
    console.log("1111111111"+pointList);
    //查询题库分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/getAllField',
            dataType: 'json',
            async:false,
            success: function (msg) {
                $.each(msg, function (i, item) {
                    $("#field").append("<option class='optionCla' value=" + item.fieldId + ">" + item.fieldName + "</option>");
                });
                $("#field").val(fieldId);
            }, error: function () {
             //   alert("分类列表失败")
            }
        })
    }


    //根据题库id获取知识点列表信息 郭瀚钰
    function getPointByField() {
        $.ajax({
            type: 'post',
            url: '/Point/getPointByField',
            dataType: 'json',
            async:false,
            data: {
                fieldId: $("#field").val()
            },
            success: function (msg) {
                $.each(msg, function (i, item) {
                    var flag=true;
                    for (j=0;j<pointList.length;j++){
                        if (item.pointId==pointList[j])
                        flag=false;
                    }
                    if (flag){
                        $("#disSelect").append(
                                '<span class="label label-info" style="margin: 10px">\n' +
                                '    <input type="hidden" class="pointId"  value='+item.pointId+'>\n' +
                                item.pointName+'\n' +
                                '</span>');
                    }
                });
            }, error: function () {
              //  alert("子类分类列表失败")
            }
        })
    }

    $(function () {

        var answer = '${question.answer}';
        /**
         * 生成ABCD文本框
         */
        var questionBody =
                '<div class="form-group">\n' +
                '   <label class="col-sm-2 control-label" for="A">A:</label>\n' +
                '   <div class="col-sm-10">' +
                '        <input type="text" class="form-control" id="A" value="${question.a}">\n ' +
                '   </div>\n' +
                '</div>\n' +
                '<div class="form-group">\n' +
                '   <label class="col-sm-2 control-label" for="B">B:</label>\n' +
                '   <div class="col-sm-10">' +
                '       <input type="text" class="form-control" id="B" value="${question.b}">\n ' +
                '   </div>\n' +
                '</div>\n' +
                '<div class="form-group">\n' +
                '   <label class="col-sm-2 control-label" for="C">C:</label>\n' +
                '   <div class="col-sm-10">' +
                '       <input type="text" class="form-control" id="C" value="${question.c}">\n ' +
                '   </div>\n' +
                '</div>\n' +
                '<div class="form-group">\n' +
                '   <label class="col-sm-2 control-label" for="D">D:</label>\n' +
                '   <div class="col-sm-10">' +
                '       <input type="text" class="form-control" id="D" value="${question.d}">\n ' +
                '   </div>\n' +
                '</div>';
        $("#questionBody").append(questionBody);
        /**
         * 生成questionType下拉框选项
         */
        if (answer == "T" || answer == "F") {
            $("#questionBody").toggle();
            $("#answer").append(
                '<option value="T">T</option>\n' +
                '<option value="F">F</option>'
            );
            $("#answer").val(answer);
        }else{
            $("#answer").append(
                    '<option value="A">A</option>\n' +
                    '<option value="B">B</option>\n' +
                    '<option value="C">C</option>\n' +
                    '<option value="D">D</option>'
            );
            $("#answer").val(answer);
        }
        /**
         * questionType切换
         */
        $("#questionType").change(function () {
            $("#questionBody").toggle();
            $("#answer").empty();
            if($("#questionType").val()==1){
                $("#answer").append(
                        '<option value="A">A</option>\n' +
                        '<option value="B">B</option>\n' +
                        '<option value="C">C</option>\n' +
                        '<option value="D">D</option>'
                );
                $("#answer").val(null);
            }else{
                $("#answer").append(
                        '<option value="T">T</option>\n' +
                        '<option value="F">F</option>'
                );
                $("#answer").val(null);
            }
        })
        $("#questionType").val(${question.questionType.id});
        /**
         *  第一次填充题库下拉框和知识点标签
         */
        getAllField();

        getPointByField();
        /**
         * 题库切换
         */
        $("#field").delegate(".optionCla","click",function () {
            $("#disSelect").empty();
            $("#onSelect").empty();
            pointList=new Array();
            getPointByField();
        });
        /**
         *  知识点标签点击切换
         */
        $("#onSelect").delegate("span","click",function () {
            $("#disSelect").append($(this).clone());
            for (j=0;j<pointList.length;j++){
                if ($(this).children(".pointId").val()==pointList[j]) {
                    var removePoint =   pointList[j];
                    pointList = $.grep(pointList, function(value) {
                        return value != removePoint;
                    });
                }
            }
            $(this).remove();

        })

        $("#disSelect").delegate("span","click",function () {
            $("#onSelect").append($(this).clone());

                    pointList.push($(this).children(".pointId").val())

            $(this).remove();

        })

    })

    var modifyQuestion=function () {
        if (pointList.length!=0){
           var pointStr= pointList.join(",");
        }
        $.ajax({
            type:'post',
            url:'/questionModify',
            data:{
                id:$("#questionId").val(),
                name:$("#name").val(),
                questionTypeId:$("#questionType").val(),
                fieldId:$("#field").val(),
                pointStr:pointStr,
                A:$("#A").val() || null,
                B:$("#B").val() || null,
                C:$("#C").val() || null,
                D:$("#D").val() || null,
                answer:$("#answer").val(),
                analysis:$("#analysis").val()
            },
            dataType:"JSON",
            success:function (msg) {
                alert(msg.msg);
                if (msg.msg=="修改成功") {
                    location.href="/questionDetail?id=${question.id}"
                }
            },error:function (msg) {
                alert(msg);
            }
        })
    }
</script>